<template>
    <div id="interview">
        <!--搜索-->
        <div class="search-box">
            <el-form :inline="true" :model="searchItem"  ref="searchItem" class="search-in">
                <el-form-item label="订单编号" class="search-item" prop="loanNo">
                    <el-input placeholder="订单编号" v-model="searchItem.loanNo"></el-input>
                </el-form-item>

                <el-form-item label="用户手机号" class="search-item" prop="phone">
                    <el-input placeholder="用户手机号" v-model="searchItem.phone"></el-input>
                </el-form-item>

                <el-form-item label="借款人" class="search-item" prop="realName">
                    <el-input placeholder="借款人" v-model="searchItem.realName"></el-input>
                </el-form-item>

                <el-form-item label="面签状态" class="search-item" prop="signStatus">
                    <el-select v-model.number="searchItem.signStatus" value="0" style="width: 120px">
                        <el-option label="待面签" :value=0></el-option>
                        <el-option label="已面签" :value=1></el-option>
                        <el-option label="面签不通过" :value=2></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="loadData" icon="fa-search">查询</el-button>
                    <el-button @click="resetForm()" icon="fa-repeat">重置</el-button>
                </el-form-item>

            </el-form>
        </div>

        <!--列表-->
        <div class="table-box">
            <el-table :data="tableData" border :fit="true" tooltip-effect="dark" ref="tableData" >
                <el-table-column type="index" align="center" label="序号" width="70"></el-table-column>
                <el-table-column prop="signStatus" align="center" label="状态" width="140"></el-table-column>
                <el-table-column property="createTime" align="center" label="申请时间" width="190"></el-table-column>
                <el-table-column prop="loanNo" align="center" label="订单编号" width="200">
                    <template scope="scope">
                        <router-link :to="{path: '/apply/borrowerDetails', query: {loanNo: scope.row.loanNo, userNo: scope.row.userNo}}" style="color: #20a0ff">{{scope.row.loanNo}}</router-link>
                    </template>
                </el-table-column>
                <el-table-column prop="realName" align="center" label="借款人" width="110"></el-table-column>
                <el-table-column prop="idcard" align="center" label="身份证号码" width="200"></el-table-column>
                <el-table-column prop="phone" align="center" label="手机号" width="130"></el-table-column>
                <el-table-column prop="carType" align="center" label="车型" width="150"></el-table-column>
                <el-table-column prop="carRemark" align="center" label="说明" width="150" show-overflow-tooltip></el-table-column>
                <el-table-column prop="loanAmount" align="center" label="申请额度（元）" width="140"></el-table-column>
                <el-table-column prop="loanTime" align="center" label="申请期限" width="100"></el-table-column>
                <el-table-column property="salesman" align="center" label="业务员" width="150"></el-table-column>
                <el-table-column property="signRemark" align="center" label="面签说明" width="140" show-overflow-tooltip></el-table-column>
                <el-table-column property="signUser" align="center" label="面签人" width="150"></el-table-column>
                <el-table-column align="left" label="操作" fixed="right" width="200">
                    <template scope="scope">
                        <el-button size="small" @click="returnLoan(scope.row)">退回</el-button>
                        <el-button size="small" type="primary" @click="signCheck(scope.$index, scope.row)" v-show="scope.row.signStatus === '待面签'">面签批复</el-button>
                        <el-button size="small" type="primary" @click="editList(scope.row)" v-show="scope.row.signStatus === '面签不通过'">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--分页-->
        <div class="pageNum">
            <el-pagination
                @current-change ="handleCurrentChange"
                @size-change="handleSizeChange"
                :pageNum-sizes="pagesize"
                layout="prev, pager, next, total, sizes"
                :total="total">
            </el-pagination>
        </div>

        <!--面签确认-->
        <el-dialog title="面签确认" :visible.sync="dialogInterviewConfirmed" class="dialogInterviewConfirmed">
            <el-form :model="interviewConfirmed" ref="interviewConfirmed" class="el-form" :inline="true" labelWidth="80px">
                <el-form-item label="是否通过" prop="passStatus" required>
                    <el-radio-group v-model.number="interviewConfirmed.passStatus">
                        <el-radio :label=1>通过</el-radio>
                        <el-radio :label=0>不通过</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>

            <el-form :model="interviewConfirmed" label-width="80px" :rules="ruleInterviewConfirmed">
                <el-form-item label="面签说明" prop="remark">
                    <el-input type="textarea" v-model="interviewConfirmed.remark" :rows="5" style="width: 473px;" resize="none"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="closeCheck">取 消</el-button>
                <el-button type="primary" @click="subSignConfirm()">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import { listLoanSign, signConfirm, returnLoanCheck } from "@/api/api";
import router from "@/router/index";
export default {
    name: "apply",
    data () {
        return {
            // 查询
            searchItem: {
                loanNo: "",
                phone: "",
                realName: "",
                signStatus: "",
                pageNum: 1,
                pageSize: 10
            },
            // 面签列表
            tableData: [],
            // 分页
            total: 0,
            pagesize: ["10","30","50"],
            // 面签确认弹窗框
            dialogInterviewConfirmed: false,
            // 面签确认
            interviewConfirmed: {
                loanNo: "",
                passStatus: 1,
                remark: ""
            },
            // 面签确认规则
            ruleInterviewConfirmed: {
                // 面签说明
                remark: [
                    { max: 2000, message: '审核说明在2000字以内', trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        // 当前页码
        handleCurrentChange(val){
            this.searchItem.pageNum = val;
            this.loadData();
        },
        // 每页条数;
        handleSizeChange(val){
            this.searchItem.pageSize = val;
            this.loadData();
        },
        // 重置
        resetForm () {
            this.$refs.searchItem.resetFields();
        },
        // 面签列表、查询
        async loadData () {
            let _this = this;
            await listLoanSign(this.searchItem).then((res) => {
                let Data = JSON.parse(res.data.ciphertext);
                if (Data) {
                    _this.tableData = Data.list;
                    console.log(_this.tableData);
                    _this.total = Data.total;
                    let arr = _this.tableData;
                    for (let i=0; i<arr.length; i++) {
                        let signStatusArr = ["待面签", "已面签", "面签不通过"];
                        let DateUnit = ["年", "月", "日"];
                        let signRepayType = ["到期还款", "先息后本", "等额本息", "等额本金"];
                        // 状态
                        arr[i].signStatus = signStatusArr[arr[i].signStatus];

                        // 申请时间
                        if (arr[i].createTime) {
                            arr[i].createTime = _this.formatTime(arr[i].createTime);
                        }

                        // 面签时间
                        if (arr[i].signTime) {
                            arr[i].signTime = _this.formatTime(arr[i].signTime);
                        }

                        // 申请期限
                        if (arr[i].loanTime) {
                            if(arr[i].loanUnit === "0" || arr[i].loanUnit === "1" || arr[i].loanUnit === "2"){
                                arr[i].loanTime = arr[i].loanTime + DateUnit[arr[i].loanUnit];
                            } else {
                                arr[i].loanTime = arr[i].loanTime + arr[i].loanUnit;
                            }
                        };

                        // 借款期限
                        if (arr[i].signLoanTime) {
                            if (DateUnit[arr[i].signLoanUnit]) {
                                arr[i].signLoanTime = arr[i].signLoanTime + DateUnit[arr[i].signLoanUnit];
                            }
                        }
                        // 还款方式
                        arr[i].signRepayType = signRepayType[arr[i].signRepayType];
                    };
                }
            });
        },
        // 编辑；
        editList (rows) {
            this.$router.push({path: '/applyTable', query: { loanNo: rows.loanNo, productNo: rows.productNo, userNo: rows.userNo }});
        },
        // 关闭面前确认弹窗；
        closeCheck () {
            this.dialogInterviewConfirmed = false;
            this.interviewConfirmed.remark = "";
        },
        // 面前批复；
        signCheck (index, rows) {
            router.push({path: '/interview/InterviewReply', query: { loanNo: rows.loanNo }});
        },
        // 面签确认
        async subSignConfirm () {
            let _this = this;
            await signConfirm(this.interviewConfirmed).then(function(res) {
                if (res.data.state.code === "200") {
                    _this.$message({
                        message: "成功",
                        type: 'success'
                    });
                    _this.dialogInterviewConfirmed = false;
                    _this.loadData();
                    _this.closeCheck();
                } else {
                    _this.$message({
                        message: res.data.state.message,
                        type: 'error'
                    });
                }
            });
        },
        // 退回
        returnLoan (row) {
            let _this = this;
            this.$confirm('是否退回?', '提示', {
                confirmButtonText: '是',
                cancelButtonText: '否',
                type: 'warning'
            }).then(() => {
                returnLoanCheck({
                    "loanNo": row.loanNo
                }).then((res) => {
                    if (res.data.state.code === "200") {
                        _this.$message({
                            message: "成功",
                            type: 'success'
                        });
                        _this.loadData();
                    } else {
                        _this.$message(res.data.state.message);
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        }
    },
    mounted: function () {
        this.$nextTick(function () {
            this.loadData();
        });
    },
    watch: {
        $route (to) {
            if(to.name === "interview"){
                this.loadData();
            }
        }
    }
};
</script>

<style lang="scss">
#interview{
    .table-ul{
        width: 100%;
        height: 50px;
        line-height:50px;
        text-align: center;
    .table-li{
        width: 120px;
        height: 50px;
        line-height:50px;
        text-align: center;
        border: 1px solid #eee;
        border-left: none;
        border-top:none;
        cursor: pointer;
    }
 }
.search-box{
    border: 1px solid #eee;
    margin:20px;
    padding:22px 0 0 20px;
    // max-width: 1300px;
    box-sizing: border-box;
    .search-in{
        .search-item{
            margin-right: 30px;
        }
    }
}
.table-box{
    margin:20px;
    // max-width: 1300px;
    .add-btn{
        margin: 20px;
        .el-icon-plus{
            font-size:12px;
        }
    }
}
.pageNum{
    text-align: right;
    padding:0 10px;
    .el-pagination{
        padding:0;
    }
}

}
</style>
